<script setup>
import { reactive } from 'vue'

// TODO 从pinia中拿到
const authorDate = reactive({
  name: '艾克拜尔',
  avatar: './assets/images/avatar.jpg',
  github: 'https://github.com/aikebai',
  gitee: 'https://gitee.com/aikebai',
  juejin: 'https://gitee.com/aikebai',
  bio: 'Lorem ipsum dolor, sit amet consectetur adipisicing elit.',
})
</script>

<template>
  <div class="author-card">
    <div class="author-avatar">
      <img src="@/assets/images/avatar.jpg" alt="Avatar" />
    </div>
    <h4 class="author-name">
      {{ authorDate.name }}
    </h4>
    <p class="author-bio">
      {{ authorDate.bio }}
    </p>
    <div class="author-social">
      <a :href="authorDate.github" class="social-link" aria-label="GitHub">
        <svg
          t="1761290358526"
          class="social-icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="9217"
          width="200"
          height="200">
          <path
            d="M512 42.666667A464.64 464.64 0 0 0 42.666667 502.186667 460.373333 460.373333 0 0 0 363.52 938.666667c23.466667 4.266667 32-9.813333 32-22.186667v-78.08c-130.56 27.733333-158.293333-61.44-158.293333-61.44a122.026667 122.026667 0 0 0-52.053334-67.413333c-42.666667-28.16 3.413333-27.733333 3.413334-27.733334a98.56 98.56 0 0 1 71.68 47.36 101.12 101.12 0 0 0 136.533333 37.973334 99.413333 99.413333 0 0 1 29.866667-61.44c-104.106667-11.52-213.333333-50.773333-213.333334-226.986667a177.066667 177.066667 0 0 1 47.36-124.16 161.28 161.28 0 0 1 4.693334-121.173333s39.68-12.373333 128 46.933333a455.68 455.68 0 0 1 234.666666 0c89.6-59.306667 128-46.933333 128-46.933333a161.28 161.28 0 0 1 4.693334 121.173333A177.066667 177.066667 0 0 1 810.666667 477.866667c0 176.64-110.08 215.466667-213.333334 226.986666a106.666667 106.666667 0 0 1 32 85.333334v125.866666c0 14.933333 8.533333 26.88 32 22.186667A460.8 460.8 0 0 0 981.333333 502.186667 464.64 464.64 0 0 0 512 42.666667"
            fill="#1296db"
            p-id="9218"></path>
        </svg>
      </a>
      <a :href="authorDate.gitee" class="social-link" aria-label="Twitter">
        <svg
          t="1761287292085"
          class="social-icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4495"
          width="200"
          height="200">
          <path
            d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"
            fill="#C71D23"
            p-id="4496"></path>
        </svg>
      </a>
      <a :href="authorDate.juejin" class="social-link" aria-label="LinkedIn">
        <svg
          t="1761289182195"
          class="social-icon"
          viewBox="0 0 1322 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6623"
          width="200"
          height="200">
          <path
            d="M643.157333 247.637333h0.085334l154.88-123.178666-154.88-124.288L643.072 0l-154.624 124.202667 154.624 123.306666 0.085333 0.128z m0.085334 388.565334l0.085333-0.085334 399.573333-315.221333-108.373333-87.04-291.2 229.76-0.085333 0.085333-0.085334 0.085334-291.242666-229.76-108.245334 87.04 399.488 315.221333 0.085334-0.085333z m-0.170667 215.466666l0.170667-0.085333 534.954666-422.101333 108.373334 87.04-243.413334 192L643.242667 1024 10.410667 525.013333 0 516.778667l108.373333-87.04 534.698667 421.973333z"
            fill="#1E80FF"
            p-id="6624"></path>
        </svg>
      </a>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.author-card {
  margin: 0 8px;
  padding: 24px;
  background-color: var(--color-surface);
  border-radius: 12px;
  text-align: center;
  transition: box-shadow $transition-speed;

  &:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  }

  .author-avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .author-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 8px;
  }

  .author-bio {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-gray-1);
    margin-bottom: 20px;
  }

  .author-social {
    display: flex;
    gap: 12px;
    justify-content: center;

    .social-link {
      @include flex-center;
      width: 40px;
      height: 40px;
      cursor: pointer;

      .social-icon {
        width: 24px;
        height: 24px;
      }
    }
  }
}
</style>
